<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Inner Top not following scroll</title>
  <meta name="description" content="Use `innerTop` option to stick after a certain distance, and `followScroll:false` so the sidebar doesn't follow the scroll once attached. In this example, sticky will stick 200px from top inside the sidebar when you go *down* or *up*.">
  <link rel="stylesheet" href="demo.css">
  <script src="hc-sticky.js"></script>
</head>

<body class="demo demo_6">

  <header>
    <figure></figure>
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </header>

  <main>

    <article>

      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>

      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>

      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>

      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>

      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>

      <section>
        <figure></figure>
        <div>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
          <p></p>
        </div>
      </section>

    </article>

    <aside>

      <div>
        <h3></h3>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>

      <ul id="stickMe">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

      <div>
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>

      <div>
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>

    </aside>

  </main>

  <footer>
    <span></span>
    <span></span>
    <span></span>
  </footer>

  <script>
    "use strict";

    var Sticky = new hcSticky('aside', {
      stickTo: 'main',
      innerTop: 200,
      followScroll: false,
      responsive: {
        980: {
          disable: true
        }
      }
    });
  </script>

</body>
</html>
